<template>
  <div>
    <!-- 顶部提示 -->
    <ul class="detail_tip">
      <li>
        <van-icon name="checked" color="#8b0000" />
        30天无忧退货
      </li>
      <li>
        <van-icon name="checked" color="#8b0000" />
        48小时快速退费
      </li>
      <li>
        <van-icon name="checked" color="#8b0000" />
        满88元免邮费
      </li>
    </ul>
    <!-- 购物车中收藏的商品模块 -->
    <div class="gcar" v-if="bool == 1">
      <van-swipe-cell v-for="(v, k) in cartList" :key="k">
        <van-checkbox v-model="v.checked" @change="f1(v.checked, v.product_id)">
          <van-card
            :num="v.number"
            :price="v.market_price | fil"
            :title="v.goods_name"
            class="goods-card"
            :thumb="v.list_pic_url"
            currency=""
          />
        </van-checkbox>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del(v.product_id)"
          />
        </template>
      </van-swipe-cell>
    </div>

    <!-- 编辑后的页面 -->
    <div class="edit" v-if="bool == 2">
      <van-swipe-cell v-for="(v, k) in cartList" :key="k">
        <van-checkbox disabled v-model="v.checked" @change="f1(v.checked)">
          <van-card
            :num="v.number"
            :price="v.market_price | fil"
            :title="v.goods_name"
            class="goods-card"
            :thumb="v.list_pic_url"
            currency=""
          />

          <!-- 步进器 -->
          <div
            class="stepper"
           
          >
            <van-stepper v-model="v.number"  @change="changeSZ(v.id,v.goods_id,v.number,v.product_id)"/>
          </div>
        </van-checkbox>
        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="del()"
          />
        </template>
      </van-swipe-cell>
    </div>

    <!-- 提交订单栏 -->
    <div class="subdata" v-if="bool == 1">
      <van-submit-bar
        :price="this.goodsAmount"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="checked" @click="gb()">全选</van-checkbox>
        <template #tip>
          <span>累计共10件商品，可点击 </span>
          <van-button type="primary" size="small" @click="tiao1()"
            >编辑</van-button
          >
          <span>按钮进行商品数量修改 </span>
          <span @click="onClickEditAddress">修改地址</span>
        </template>
      </van-submit-bar>
    </div>
    <!-- 编辑后的页面 -->

    <div class="editsubdata" v-if="bool == 2">
      <van-submit-bar
        :price="this.goodsAmount"
        button-text="提交订单"
        @submit="onSubmit"
      >
        <van-checkbox v-model="checked" disabled>全选</van-checkbox>
        <template #tip>
          <span> 累计共0件商品，可点击 </span>
          <van-button type="danger" size="small" @click="tiao2()"
            >完成编辑</van-button
          >
          <span>按钮进行商品数量修改 </span>
          <span @click="onClickEditAddress">修改地址</span>
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
// import { GetCartGoodsCount } from "@/request/api";
export default {
  name: "H559Gcar",

  components: {},

  directives: {},

  data() {
    return {
      token: "",
      radio: "1",
      goodsCount: "",
      cartList: "",
      checked: "",
      kg: false,
      market_price: "",
      cartTotal: "",
      bool: true,
      value: 1,
      goodsAmount: 0,
    };
  },

  mounted() {},

  methods: {
    onSubmit() {},
    onClickEditAddress() {},
    gb() {
      // 全选 全不选 开关方法
      if (!this.kg) {
        if (this.checked) {
          for (let i = 0; i < this.cartList.length; i++) {
            this.cartList[i].checked = 1;
          }
        } else {
          for (let i = 0; i < this.cartList.length; i++) {
            this.cartList[i].checked = 0;
          }
        }
      } else {
        if (this.checked) {
          for (let i = 0; i < this.cartList.length; i++) {
            this.cartList[i].checked = 1;
          }
        } else {
          for (let i = 0; i < this.cartList.length; i++) {
            this.cartList[i].checked = 0;
          }
        }
      }
      this.kg = !this.kg;
    },
    f1(k, pid) {
      let xb = Number(k);
      axios
        .post(
          "/api/cart/checked",
          {
            isChecked: xb,
            productIds: pid,
          },
          {
            headers: {
              "X-Nideshop-Token": this.token,
            },
          }
        )
        .then((res) => {
          console.log(res);
          this.goodsAmount = res.data.data.cartTotal.checkedGoodsAmount;
          this.goodsAmount = Number(this.goodsAmount) * 100;

          console.log(this.goodsAmount);
        });
      // console.log(k);
      this.f5();
    },
    f5() {
      for (let i = 0; i < this.cartList.length; i++) {
        if (this.cartList[i].checked == false) {
          this.checked = false;
          return;
        } else {
          this.checked = true;
        }
      }
    },
    tiao1() {
      this.bool = 2;
    },
    tiao2() {
      this.bool = 1;
    },

    // 删除操作
    del(k) {
      // console.log(k);
      let str = k.toString();
      axios
        .post(
          "/api/cart/delete",
          {
            productIds: str,
          },
          {
            headers: {
              "X-Nideshop-Token": this.token,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          Toast.loading({
            message: "删除中...",
            forbidClick: true,
            duration: 1000,
          });
          this.$router.go(0);
        });
    },
    changeSZ(k, gk,number, pk) {
      // console.log(123);
      this.token = localStorage.getItem("tok");
      // console.log(this.token);
      axios
        .post(
          "http://kumanxuan1.f3322.net:8001/cart/update",
          {
            productId:pk,
            goodsId:gk,
            id:k,
            number:number,
          },
          {
            headers: {
              "X-Nideshop-Token": this.token,
            },
          }
        )
        .then((res) => {
          // console.log(res);
          this.goodsAmount = res.data.data.cartTotal.checkedGoodsAmount*100;

        }); 
    },
  },
  created() {
    this.token = localStorage.getItem("tok");
    // console.log(this.token);
    axios
      .get("http://kumanxuan1.f3322.net:8001/cart/index", {
        headers: {
          "X-Nideshop-Token": this.token,
        },
      })
      .then((res) => {
        // console.log(res);
        this.cartList = res.data.data.cartList;
        this.cartTotal = res.data.data.cartTotal;
        // this.total = res.data.data.cartTotal.goodsAmount * 100;
        this.goodsAmount = res.data.data.cartTotal.checkedGoodsAmount;
        this.goodsAmount = Number(this.goodsAmount) * 100;
        this.f5();
      });
  },

  filters: {
    fil(v) {
      v = Number(v);
      return "￥ " + v.toFixed(2) + "元";
    },
  },
};
</script>

<style lang="less">
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>